<template>
  <div class="content">
    <manager-view
      :show-refresh="false"
      :show-roll="false"
      :show-save="false"
      :show-submit="false"
      :show-check="false"
      :show-un-check="false"
      :show-qualified-warehousing="false"
      :show-waste-storage="false"
      :show-delete="false"
      :show-quit="false"
      :show-outsource="false"
      :disable-outsource="taskDetails.isOutsource != 1"
      :disable-initiate="
        taskDetails.isOutsource == 1 ||
        !(taskDetails.taskStatus == 2 || taskDetails.taskStatus == 4)
      "
      :disable-pause="
        taskDetails.isOutsource == 1 || !(taskDetails.taskStatus == 3)
      "
      :disable-done="
        taskDetails.isOutsource == 1 ||
        !(taskDetails.taskStatus == 3 || taskDetails.taskStatus == 4)
      "
      :disable-get="taskDetails.isRework === 1"
      :disable-receive="taskDetails.isRework === 1"
      :disable-report="taskDetails.isOutsource == 1"
      :disable-first="taskDetails.firstInspection == 1"
      @back="backAction"
      @initiate="initiateAction"
      @pause="pauseAction"
      @done="doneAction"
      @report="reportAction"
      @get="getAction"
      @receive="receiveAction"
      @first="firstAction"
      @outsourceReceive="outsourceReceiveAcition"
      @outsourcingReceive="outsourcingReceiveAcition"
    >
      <div class="card-details">
        <card-view title="基本信息">
          <div class="basic-view">
            <div class="basic-view-left">
              <el-form label-position="top" inline>
                <el-form-item label="单据编号">
                  <el-input
                    disabled
                    style="width: 210px"
                    placeholder="请输入"
                    v-model="taskDetails.codeNo"
                  />
                </el-form-item>
                <!-- <el-form-item label="工序号">
                  <el-input
                    disabled
                    style="width: 210px"
                    placeholder="请输入"
                    v-model="taskDetails.processSerial"
                  />
                </el-form-item> -->
                <el-form-item label="工序名称">
                  <el-input
                    disabled
                    style="width: 210px"
                    placeholder="请输入"
                    v-model="taskDetails.processName"
                  />
                </el-form-item>
                <!-- <el-form-item label="工序编号">
                  <el-input
                    disabled
                    style="width: 210px"
                    placeholder="请输入"
                    v-model="taskDetails.processFullCode"
                  />
                </el-form-item> -->
                <el-form-item label="工序任务状态">
                  <el-select
                    disabled
                    v-model="taskDetails.taskStatus"
                    placeholder="请选择"
                    clearable
                    style="width: 210px"
                  >
                    <el-option
                      v-for="dict in task_status"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="表面">
                  <el-input
                    disabled
                    style="width: 210px"
                    placeholder="请输入"
                    v-model="taskDetails.surfaceName"
                  />
                </el-form-item>
                <!-- <el-form-item label="产品编码">
                  <el-input
                    disabled
                    style="width: 210px"
                    placeholder="请输入"
                    v-model="taskDetails.matterFullCode"
                  />
                </el-form-item> -->
                <el-form-item label="产品名称">
                  <el-input
                    disabled
                    style="width: 210px"
                    placeholder="请输入"
                    v-model="taskDetails.matterName"
                  />
                </el-form-item>
                <el-form-item label="助记码">
                  <el-input
                    disabled
                    style="width: 210px"
                    placeholder="请输入"
                    v-model="taskDetails.matterMnemonicCode"
                  />
                </el-form-item>
                <el-form-item label="规格型号">
                  <el-input
                    disabled
                    style="width: 210px"
                    placeholder="请输入"
                    v-model="taskDetails.matterSpecModel"
                  />
                </el-form-item>
                <!-- <el-form-item label="订单需求数量">
                  <el-input
                    disabled
                    style="width: 210px"
                    placeholder="请输入"
                    v-model="taskDetails.orderDemandNum"
                  />
                </el-form-item> -->
                <!-- <el-form-item label="工序任务计划数量">
                  <el-input
                    disabled
                    style="width: 210px"
                    placeholder="请输入"
                    v-model="taskDetails.processPlanNum"
                  />
                </el-form-item> -->
                <el-form-item label="本次任务数量">
                  <el-input
                    disabled
                    style="width: 210px"
                    placeholder="请输入"
                    v-model="taskDetails.theTaskNum"
                  />
                </el-form-item>
                <el-form-item label="计量单位">
                  <el-input
                    disabled
                    style="width: 210px"
                    placeholder="请输入"
                    v-model="taskDetails.unitName"
                  />
                </el-form-item>
                <el-form-item label="辅助数量">
                  <el-input
                    disabled
                    style="width: 210px"
                    placeholder="请输入"
                    v-model="taskDetails.assistNums"
                  />
                </el-form-item>
                  <el-form-item label="辅助单位" v-if="taskDetails.assistUnitName">
                  <el-input
                    disabled
                    style="width: 210px"
                    placeholder="请输入"
                    v-model="taskDetails.assistUnitName"
                  />
                </el-form-item>
                <el-form-item label="滑块总数量">
                  <el-input
                    disabled
                    style="width: 210px"
                    placeholder="请输入"
                    v-model="taskDetails.sliderAllNum"
                  />
                </el-form-item>
                <el-form-item label="导轨总长度(mm)">
                  <el-input
                    disabled
                    style="width: 210px"
                    placeholder="请输入"
                    v-model="taskDetails.monorailAllLength"
                  />
                </el-form-item>
                <el-form-item label="滑块数量">
                  <el-input
                    disabled
                    style="width: 210px"
                    placeholder="请输入"
                    v-model="taskDetails.sliderNum"
                  />
                </el-form-item>
                <el-form-item label="汇报数量">
                  <el-input
                    disabled
                    style="width: 210px"
                    placeholder="请输入"
                    v-model="taskDetails.reportNum"
                  />
                </el-form-item>
                <el-form-item label="转出数量">
                  <el-input
                    disabled
                    style="width: 210px"
                    placeholder="请输入"
                    v-model="taskDetails.rollOutNum"
                  />
                </el-form-item>
                <el-form-item label="上道工序转入数量">
                  <el-input
                    disabled
                    style="width: 210px"
                    placeholder="请输入"
                    v-model="taskDetails.beforeProcessReceiveNum"
                  />
                </el-form-item>
                <el-form-item label="单轨长度(mm)">
                  <el-input
                    disabled
                    style="width: 210px"
                    placeholder="请输入"
                    v-model="taskDetails.monorailLength"
                  />
                </el-form-item>
                <el-form-item label="报工合格数量">
                  <el-input
                    disabled
                    style="width: 210px"
                    placeholder="请输入"
                    v-model="taskDetails.workReportQualifiedNum"
                  />
                </el-form-item>
                <el-form-item label="报工不良数量">
                  <el-input
                    disabled
                    style="width: 210px"
                    placeholder="请输入"
                    v-model="taskDetails.workReportConcessionNum"
                  />
                </el-form-item>
                <el-form-item label="报工报废数量">
                  <el-input
                    disabled
                    style="width: 210px"
                    placeholder="请输入"
                    v-model="taskDetails.workReportScrapNum"
                  />
                </el-form-item>
                <el-form-item label="工序计划开始时间">
                  <el-input
                    disabled
                    style="width: 210px"
                    placeholder="请输入"
                    v-model="taskDetails.planStartDate"
                  />
                </el-form-item>
                <el-form-item label="工序计划完成时间">
                  <el-input
                    disabled
                    style="width: 210px"
                    placeholder="请输入"
                    v-model="taskDetails.planEndDate"
                  />
                </el-form-item>
                <el-form-item label="工序实际开始时间">
                  <el-input
                    disabled
                    style="width: 210px"
                    placeholder="请输入"
                    v-model="taskDetails.actualStartDate"
                  />
                </el-form-item>
                <el-form-item label="工序实际完成时间">
                  <el-input
                    disabled
                    style="width: 210px"
                    placeholder="请输入"
                    v-model="taskDetails.actualEndDate"
                  />
                </el-form-item>
                <el-form-item label="是否末道工序">
                  <el-checkbox
                    disabled
                    style="width: 210px"
                    v-model="taskDetails.isLastProcess"
                    true-value="1"
                    false-value="0"
                  />
                </el-form-item>
                <el-form-item label="是否工序检验">
                  <el-checkbox
                    disabled
                    style="width: 210px"
                    v-model="taskDetails.isProcessCheck"
                    true-value="1"
                    false-value="0"
                  />
                </el-form-item>
                <el-form-item label="是否委外">
                  <el-checkbox
                    disabled
                    style="width: 210px"
                    v-model="taskDetails.isOutsource"
                    true-value="1"
                    false-value="0"
                  />
                </el-form-item>
              </el-form>
            </div>
            <div class="basic-view-right">
              <edit-tool
                v-if="taskDetails.id"
                :codeNo="taskDetails.codeNo"
                :drawingId="taskDetails.drawingId"
              ></edit-tool>
            </div>
          </div>
        </card-view>
        <card-view title="工序要求信息">
          <el-form label-position="top" inline>
            <el-form-item label="工艺要求">
              <el-input
                disabled
                style="width: 350px"
                placeholder="请输入"
                v-model="taskDetails.processContent"
              />
            </el-form-item>
            <el-form-item label="加工要求">
              <el-input
                disabled
                style="width: 350px"
                placeholder="请输入"
                v-model="taskDetails.processingInstructions"
              />
            </el-form-item>
            <el-form-item label="任务执行人">
              <el-select
                disabled
                style="width: 350px"
                v-model="taskDetails.executorId"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in operatorList"
                  :key="item.userId"
                  :label="item.userName"
                  :value="item.userId"
                />
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="设备编号">
              <el-input disabled style="width: 350px" placeholder="请输入" />
            </el-form-item> -->
            <el-form-item label="备注">
              <el-input disabled style="width: 350px" placeholder="请输入" />
            </el-form-item>
          </el-form>
        </card-view>
        <card-view mb-10px title="接收信息列表">
          <el-table :data="DrawTableReceiveData" style="width: 100%">
            <el-table-column label="单据编号" prop="codeNo" align="center" />
            <el-table-column
              label="已派工数量"
              prop="dispatchedNums"
              align="center"
            />
            <el-table-column
              label="剩余派工数量"
              prop="remainingDispatchNums"
              align="center"
            />
            <el-table-column
              label="已接受数量"
              prop="nextProcessReceiveNum"
              align="center"
            />
            <el-table-column
              label="剩余接收数量"
              prop="unReceiveNum"
              align="center"
            />
            <!-- <el-table-column align="center" label="操作">
              <template #default="scope">
                <el-button
                  type="primary"
                  :disabled="scope.row.unReceiveNum === 0"
                  @click="receiveDrawActionAllSubmit(scope.$index)"
                  >全部接收</el-button
                >
              </template>
            </el-table-column> -->
          </el-table>
        </card-view>
        <card-view mb-10px title="制单信息">
          <document-view :list="documentList" />
        </card-view>
      </div>
    </manager-view>
    <el-dialog v-model="dialogVisibleDraw" title="领料" width="auto">
      <el-table :data="DrawTableData" style="width: 100%">
        <el-table-column
          label="物料名称"
          prop="matterName"
          width="180"
          align="center"
        />
        <el-table-column
          label="应领数量"
          prop="standardNums"
          width="140"
          align="center"
        />
        <el-table-column
          label="实际用量"
          prop="actualNums"
          width="140"
          align="center"
        />
        <el-table-column
          label="剩余领取数量"
          prop="canPickingNums"
          width="140"
          align="center"
        />
        <el-table-column align="center" label="领料数量" width="180">
          <template #default="scope">
            <el-input
              v-no-negative
              v-model="scope.row.pickingNum"
              placeholder="请输入"
              :max="scope.row.canPickingNums"
              type="number"
            />
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisibleDraw = false">取消</el-button>
          <el-button type="primary" @click="drawActionSubmit"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="dialogVisibleReceiveDraw"
      :title="dialogTitle"
      width="auto"
    >
      <el-table :data="DrawTableReceiveData" style="width: 100%">
        <el-table-column
          label="单据编号"
          prop="codeNo"
          width="220"
          align="center"
        />
        <el-table-column
          label="已派工数量"
          prop="dispatchedNums"
          width="140"
          align="center"
        />
        <el-table-column
          label="剩余派工数量"
          prop="remainingDispatchNums"
          width="140"
          align="center"
        />
        <el-table-column
          label="已接受数量"
          prop="nextProcessReceiveNum"
          width="140"
          align="center"
        />
        <el-table-column
          label="剩余接收数量"
          prop="unReceiveNum"
          width="140"
          align="center"
        />
        <el-table-column align="center" label="接受数量" width="180">
          <template #default="scope">
            <el-input
              v-no-negative
              v-model="scope.row.receiveNum"
              placeholder="请输入"
              :max="scope.row.unReceiveNum"
              type="number"
            />
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisibleReceiveDraw = false">取消</el-button>
          <el-button type="primary" @click="receiveDrawActionSubmit">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import ManagerView from "@/components/ManagerView/index.vue";
import EditTool from "@/components/EditTool/index.vue";
import DocumentView from "@/components/DocumentView/index.vue";
import { useRouter, useRoute } from "vue-router";
import {
  getReportExecuteProcessTaskDetailsApi,
  startReportProcessTaskApi,
  suspendReportProcessTaskApi,
  finishReportProcessTaskApi,
  acceptReportProcessTaskApi,
  pickingReportProcessTaskApi,
  firstReportInspectionProcessTaskApi,
  reportTaskApi,
  getQueryPickApi,
  getQueryTransferApi,
  getQueryTransferOutApi,
  outsourcingProcessTaskApi,
} from "@/api/reportTask";
import { listOperatorListApi } from "@/api/login";
import { useLoading } from "@/hooks/loading";

onMounted(() => {
  getTaskDetails(route.query.id);
});
const route = useRoute();
const router = useRouter();

const { proxy } = getCurrentInstance();
const { task_status } = toRefs(proxy?.useDict("task_status"));

/** 任务详情 */
const taskDetails = ref({});
/** 获取任务单详情 */
const getTaskDetails = async (id) => {
  const res = await getReportExecuteProcessTaskDetailsApi(id);
  taskDetails.value = res.data;
  taskDetails.value.taskStatus = String(res.data.taskStatus);
  taskDetails.value.isLastProcess = String(res.data.isLastProcess);
  taskDetails.value.isOutsource = String(res.data.isOutsource);
  taskDetails.value.isProcessCheck = String(res.data.isProcessCheck);
  documentInfoCreate(res.data);
  receiveAction(true);
};

// 生产人员列表
const operatorList = ref([]);
/** 获取生产人员列表 */
const getPersonList = async () => {
  const res = await listOperatorListApi();
  operatorList.value = res.data;
};
getPersonList();

/** 制单信息 */
const documentList = ref([]);
const documentInfoCreate = (details) => {
  let list = [];
  // 制单人
  let cteateInfo = {
    titleTop: "制单人",
    infoTop: details?.createName,
    titleBottom: "创建时间",
    infoBottom: details?.createTime,
  };
  list.push(cteateInfo);

  // 修改人
  let updateInfo = {
    titleTop: "修改人",
    infoTop: details?.updateName,
    titleBottom: "修改时间",
    infoBottom: details?.updateTime,
  };
  list.push(updateInfo);

  // 审核人
  let checkInfo = {
    titleTop: "审核人",
    infoTop: details?.checkName,
    titleBottom: "审核时间",
    infoBottom: details?.checkTime,
  };
  list.push(checkInfo);
  documentList.value = list;
};
documentInfoCreate();

const { loading, close } = useLoading();
/** 开工 */
const initiateAction = async () => {
  loading("加载中");
  try {
    await startReportProcessTaskApi(taskDetails.value.id);
    getTaskDetails(taskDetails.value.id);
    close();
  } catch (error) {
    close();
  }
};

/** 暂停 */
const pauseAction = async () => {
  loading("加载中");
  try {
    await suspendReportProcessTaskApi(taskDetails.value.id);
    getTaskDetails(taskDetails.value.id);
    close();
  } catch (error) {
    close();
  }
};

/** 完工 */
const doneAction = async () => {
  loading("加载中");
  try {
    await finishReportProcessTaskApi(taskDetails.value.id);
    getTaskDetails(taskDetails.value.id);
    close();
  } catch (error) {
    close();
  }
};
const dialogTitle = ref("");

/** 委外接收 */
const outsourceReceiveAcition = async () => {
  dialogTitle.value = "委外接收";
  dialogVisibleReceiveDraw.value = true;
  const res = await getQueryTransferOutApi(taskDetails.value.id);
  DrawTableReceiveData.value = res.data;
};

/** 委外转出 */
const outsourcingReceiveAcition = async () => {
  ElMessageBox.prompt(
    "委外单据未转出数量：" + (taskDetails.value.unReportNum || 0),
    "委外转出",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      inputPattern: /^(0|[1-9]\d*)$/,
      inputPlaceholder: "请输入转出数量",
      inputType: "number",
      inputErrorMessage: "请输入正确的转出数量！",
    }
  )
    .then(async ({ value }) => {
      const res = await outsourcingProcessTaskApi({
        id: taskDetails.value.id,
        outsourcingOutNum: value,
      });
      getTaskDetails(taskDetails.value.id);
      close();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "输入已取消",
      });
    });
};

/** 报工 */
const reportAction = async () => {
  ElMessageBox.prompt(
    "剩余可汇报数量：" + (taskDetails.value.unReportNum || 0),
    "报工",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      inputPattern: /^(0|[1-9]\d*)$/,
      inputPlaceholder: "请输入汇报数量",
      inputType: "number",
      inputErrorMessage: "请输入正确的汇报数量！",
    }
  )
    .then(async ({ value }) => {
      const res = await reportTaskApi({
        id: taskDetails.value.id,
        reportNum: value,
      });
      // 成功提示
      ElMessage.success("已完成报工！");
      getTaskDetails(taskDetails.value.id);
      close();
    })
    .catch((err) => {
      console.log("???", err);
      // ElMessage({
      //   type: "info",
      //   message: "输入已取消",
      // });
    });
  // loading("加载中");
  // try {
  //   await reportTaskApi(taskDetails.value.id);
  //   getTaskDetails(taskDetails.value.id);
  //   close();
  // } catch (error) {
  //   close();
  // }
};

const dialogVisibleDraw = ref(false);
const DrawTableData = ref([]);
/** 领料 */
// const getAction = async () => {
//     dialogVisibleDraw.value = true;
//     const rest = await getQueryPickApi(taskDetails.value.id);
//     DrawTableData.value = rest.data;
//     // 获取数据
//     // const res = await getQueryPickApi(taskDetails.value.id);
//     // try {
//     //     // 将领料数量填充为应领数量
//     //     DrawTableData.value = res.data.map((item) => ({
//     //         ...item,
//     //         pickingNum: item.canPickingNums || 0, // 填充默认领料数量
//     //     }));
//     //     // 提交数据
//     //     const submitRes = await pickingReev
//     //     portProcessTaskApi({
//     //         id: taskDetails.value.id,
//     //         pickingDTOList: DrawTableData.value,
//     //     });
//     //     // 成功提示
//     //     ElMessage.success(submitRes.msg || "已完成领料！");
//     //     // 刷新任务详情或页面数据
//     //     //getProcessTaskDetails(taskDetails.value.id);
//     // } catch (error) {
//     //     ElMessage.error("领料失败");
//     // }
//     pageCallBack();
// };

/** 领料 */
const getAction = async () => {
    try {
        loading("领料中...");
        //获取可领料数据
        const res = await getQueryPickApi(taskDetails.value.id);
        //自动填充剩余可领数量
        const autoFillData = res.data.map(item => ({
            ...item,
            pickingNum: item.canPickingNums || 0  // 自动填充剩余可领数量
        }));
        // 检查是否所有可领数量为 0
        const hasAvailablePicking = autoFillData.some(item => item.canPickingNums > 0);
        if (!hasAvailablePicking) {
            ElMessage.warning("该任务已完成领料，无可领取物料！");
            close();
            return;
        }
        //提交领料请求
        const submitRes = await pickingReportProcessTaskApi({
            id: taskDetails.value.id,
            pickingDTOList: autoFillData
        });
        //刷新数据并提示
        await getTaskDetails(taskDetails.value.id);
        ElMessage.success(submitRes.msg || "领料成功！");
        // 触发页面回调
        pageCallBack();
    } catch (error) {
        ElMessage.error("领料失败：" + (error.message || "请联系管理员"));
    } finally {
        close();
    }
};
/** 页面间回调 */
const pageCallBack = () => {
    // bus.emit('taskRefresh');
};

const drawActionSubmit = async () => {
  let msg = "";
  DrawTableData.value.forEach((item) => {
    if (item.pickingNum < 0) msg = "领料数量不能为负数！";
    if (item.pickingNum > item.canPickingNums)
      msg = "领料数量不能大于剩余领取数量！";
  });
  // if (msg) return ElMessage.error(msg);
  const res = await pickingReportProcessTaskApi({
    id: taskDetails.value.id,
    pickingDTOList: DrawTableData.value,
  });
  alert('领料成功');
  getProcessTaskDetails(taskDetails.value.id);
  dialogVisibleDraw.value = false;
  ElMessage.success(res.msg);
  pageCallBack();
};

/** 接收 */
const dialogVisibleReceiveDraw = ref(false);
const DrawTableReceiveData = ref([]);

const receiveAction = async (show) => {
  if (!show) dialogVisibleReceiveDraw.value = true;
  dialogTitle.value = "转出";
  const res = await getQueryTransferApi(taskDetails.value.id);
  DrawTableReceiveData.value = res.data;
  // await acceptReportProcessTaskApi(taskDetails.value.id);
  // getTaskDetails(taskDetails.value.id);
  // close();
};
const receiveDrawActionSubmit = async () => {
  debugger
  let msg = "";
  let validationError = ''
   for (const item of DrawTableReceiveData.value) {
    // 确保接收数量是数字
    if (isNaN(item.receiveNum)) {
      validationError = '请输入有效的数字'
      break
    }
     // 验证接收数量范围
    if (Number(item.receiveNum) <= 0) {
      validationError = '接收数量不能为负数'
      break
    }
    if (Number(item.receiveNum) > Number(item.unReceiveNum)) {
      validationError = `单据的接收数量不能大于剩余数量`
      break
    }
  };
  if (validationError) return ElMessage.error(validationError);

  const res = await acceptReportProcessTaskApi({
    id: taskDetails.value.id,
    acceptDTOList: DrawTableReceiveData.value,
  });
  getTaskDetails(taskDetails.value.id);
  dialogVisibleDraw.value = false;
  ElMessage.success(res.msg);
  pageCallBack();
};
// 全部接收
const receiveDrawActionAllSubmit = (index) => {
  ElMessageBox.confirm("您确定要全部接收吗?", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      DrawTableReceiveData.value[index].receiveNum =
        DrawTableReceiveData.value[index].unReceiveNum;
      const res = await acceptReportProcessTaskApi({
        id: taskDetails.value.id,
        acceptDTOList: DrawTableReceiveData.value,
      });
      getTaskDetails(taskDetails.value.id);
      proxy?.$modal.msgSuccess(res.msg);
      pageCallBack();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
};

/** 首检 */
const firstAction = async () => {
  loading("加载中");
  try {
    await firstReportInspectionProcessTaskApi(taskDetails.value.id);
    getTaskDetails(taskDetails.value.id);
    ElMessage.success('首检成功');
    close();
  } catch (error) {
    close();
  }
};

/** 返回 */
const backAction = () => {
  console.log(123);
  router.go(-1);
};
</script>

<style lang="scss" scoped>
.basic-view {
  display: flex;
  &-left {
    flex-grow: 1;
  }
  &-right {
    min-width: 300px;
    width: 300px;
    .edit-tool {
      height: 100%;
    }
  }
}
</style>
